<template>
    <div>
        <el-table :max-height="calcMaxHeight()" style="width:100%;" ref="table" :load="load"
            :data="rows" :row-key="idName" border :lazy="lazy"
            highlight-current-row size="mini" :default-expand-all="false"
            @sort-change="sortChange"
            @current-change="currentChane" :current-row-key="currentKey">
            <slot></slot>
        </el-table>
        <div>&nbsp;</div>
    </div>
</template>

<script>
module.exports = {
    data: function() {
        return {
            currentKey: null
        }
    },
    props: {
        lazy: Boolean,
        value: Object,
        rows: Array,
        idName: {
            default: 'id',
            type: String
        },
        maxHeight: String,
        // load: Function,
        map: Object
    },
    created: function() {
        // console.log('table created ', this.idName);
        // this.debugCheckId();
        if(this.value != null) {
            // 初始化选择项功能
            // this.currentKey = this.value.id;
        }
    },
    watch: {
        rows: function(value) {
            // console.log('rows watch');
            this.$refs.table.setCurrentRow(); // 取消选中
        }
    },
    methods: {
        currentChane: function(row, oldRow) {
            // console.log('current change ', row);
            this.$emit('input', row);
        },
        debugCheckId: function() {
            if(this.rows != null) {
                if(this.rows.length > 0) {
                    var row = this.rows[0];
                    if(row[this.idName] == null) {
                        console.error("表格Id设置可能不正确");
                    }
                }
            }
        },
        sortChange: function(sortInfo) {
            // console.log('sortInfo', sortInfo);
            var order = null;
            if(sortInfo.order == 'ascending') {
                order = 'asc';
            } else if(sortInfo.order == 'descending') {
                order = 'desc';
            }
            var sortConfig = {
                sortField: sortInfo.prop,
                sortOrder: order
            }
            console.log('sortConfig', sortConfig);
            this.$emit('sort-change', sortConfig);
        },
        load: function(tree, treeNode, resolve) {
            this.$emit('load', tree, treeNode, resolve)
        },
        calcMaxHeight: function() {
            if(this.maxHeight == "0px") {
                return null;
            }
            var height = Core.getClientHeight() - 300 ;
            return height;
        }
    },
    
}
</script>